<template>
<div class="home-container">

 <van-nav-bar class="page-nav-bar" fixed="">
  <template #right>
<van-button type="info" to="/search" size="samll" icon="search"  round class="search-button">搜索</van-button>
  </template>
</van-nav-bar>  


<van-tabs class="channels-tabs" color="#3296fa" v-model:active="active" title-active-color="red">
  <van-tab :title="channel.name" v-for="channel in state.channels" :key="channel.id">
 <AtricleList :channel="channel"></AtricleList>
</van-tab>
 
  <template #nav-right >
    <van-icon class="hamburger-btn" name="wap-nav" @click="isChannelEditShow=true" ></van-icon>
  </template>
</van-tabs>


<van-popup v-model:show="isChannelEditShow" closeable
position="top"
close-icon-position="top-left"
:style="{height:'100%'}"
>
<ChannelEdit :my-channels="state.channels" :active="active" @update-active="onUpdateActive"> </ChannelEdit>
</van-popup>
    </div>

</template>

<script setup>
import {getUserChaneels,getCurrentChannels} from "../../api/user"
import {ref,reactive,onMounted,defineProps} from "vue"
import AtricleList from "../../components/article-list.vue"
import ChannelEdit from "../../components/channel-edit.vue"
import { useStore } from "vuex";
import { getItem } from "../../utils/storage";
const active = ref(0);
const store=useStore()
let isChannelEditShow=ref(false)


    let state=reactive({
        channels:[]
    })
    const loadChannels=async ()=>{
        //   let res=  await getUserChaneels()
        //   state.channels=res.data
     let channels=[]
        //判断是否登录
        if(store.state.user){
         const {data} =   await getCurrentChannels(store.state.user.data.id)
                channels=data
        }else{
            //用户没有登录
            const loadChannels=await getItem("TOUTIAO_CHANNELS")
            if(loadChannels){
                channels=loadChannels
            }else{
                let {data}=  await getUserChaneels()
                channels=data
            }
        }
            state.channels=channels

          
    }
function onUpdateActive(index,ChannelEditShow=true){
    console.log(index);
    active.value=index
    isChannelEditShow.value=ChannelEditShow
}


    onMounted(() => {
        loadChannels()
    })

</script>
<style>
.home-container{
    margin-bottom: 50px;
}
.home-container .search-button{
    width: 300px;
    height: 30px;
    background-color: #5babfb;
    border: none;
    font-size: 18px;
    color:#fff
}
 /* .van-nav-bar__title{
    display: none !important;
} */
.home-container{
   position: relative;
}

.van-nav-bar__right{
    position:absolute; 
    top:50%; 
	left:50%;
    width: 300px;
	transform:translate(-50%,-50%);
}

.channels-tabs .van-tab{
    min-width: 120px;
    border-right:1px solid #edeff3;
    font-size: 16px;
    color:#777
}   
 .channels-tabs  .hamburger-btn{
    position: fixed;
    right: -19px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 66px;
    line-height: 44px;
    background-color: #fff;
    font-size: 28px;
    opacity: 0.902;
 }
 .channels-tabs  .van-tabs__wrap{
    position: fixed;
    top: 46px;
    z-index: 1;
    left: 0;
    right: 0;
 }
</style>